<template>
  <div id="app" 
       @mouseup.prevent.stop="clickUp(-1,-1)" 
       @click="showmenu(0)">
    <div class="cover"
         @click.prevent.stop="fade"
         v-if="showAppCover"></div>
    <div class="out">
      <div class="menu">
        <div class="menu-top" 
             @mousedown.prevent.stop="Move('.out')"
             @mouseup.prevent.stop="MoveUp('.out')">
          <span class="menu-title">
            <img src="./assets/img/title.png">
            <span style="padding-left:5px;"
                  v-show="columns > 9">扫雷</span>
          </span>
          <div class="menu-top-right">
            <span style="font-size: 12px;top: -1px;">ㄧ</span>
            <span style="font-size: 17px;top:-1px;color:rgb(204,204,204)">□</span>
            <span @click.stop>╳</span>
          </div>
        </div>
        <div class="menu-bottom">
          <span class="game" 
                @click.prevent.stop="showmenu(1)"
                @mouseover.stop="hiddenMenu"
                :class="{clicked:showMenu}">游戏(G)</span>
          <div class="dropdown" 
               v-if="showMenu" 
               @click.prevent.stop
               @mouseover.stop="hiddenMenu"
               ref="dropdown">
            <div class="menu-item" @click="resetGame">
              <span class="checkButton">✓</span>
              <span>开局(N)</span>
            </div>
            <div class="split"></div>
            <div class="menu-item" @click="changeLevel(1)">
              <span class="checkButton" :class="{vishidden:checkedBox[0] == 1}">✓</span>
              <span>初级(B)</span>
            </div>
            <div class="menu-item" @click="changeLevel(2)">
              <span class="checkButton" :class="{vishidden:checkedBox[0] == 2}">✓</span>
              <span>中级(I)</span>
            </div>
            <div class="menu-item" @click="changeLevel(3)">
              <span class="checkButton" :class="{vishidden:checkedBox[0] == 3}">✓</span>
              <span>高级(E)</span>
            </div>
            <div class="menu-item" @click="toggle(1)">
              <span class="checkButton" :class="{vishidden:checkedBox[0] == 4}">✓</span>
              <span>自定义(C)...</span>
            </div>
            <div class="split"></div>
            <!-- <div class="menu-item"><span class="checkButton"></span><span>标记(?)(M)</span></div> -->
            <div class="menu-item" @click="turn">
              <span class="checkButton" :class="{vishidden:checkedBox[1] == 5}">✓</span>
              <span>声音(S)</span>
            </div>
            <div class="split"></div>
            <div class="menu-item" @click="toggle(0)">
              <span class="checkButton">✓</span>
              <span>扫雷英雄榜(T)...</span>
            </div>
            <div class="split"></div>
            <div class="menu-item">
              <span class="checkButton">✓</span>
              <span>退出(X)</span>
            </div>
          </div>
          <cpn title="扫雷英雄榜" index="0" v-show="showRank">
            <template #default>
              <div class="rank">
                <div class="rank-top">
                  <div class="rank-top-item">
                    <span>初级：</span>
                    <span>{{record[0] | addZero}}&nbsp;秒</span>
                    <span>{{recordName[0]}}</span>
                  </div>
                  <div class="rank-top-item">
                    <span>中级：</span>
                    <span>{{record[1] | addZero}}&nbsp;秒</span>
                    <span>{{recordName[1]}}</span>
                  </div>
                  <div class="rank-top-item">
                    <span>高级：</span>
                    <span>{{record[2] | addZero}}&nbsp;秒</span>
                    <span>{{recordName[2]}}</span>
                  </div>
                </div>
                <div class="rank-bottom">
                  <div class="button">
                    <div @click.prevent.stop="resetRecord">重新计分(R)</div>
                  </div>
                  <div class="button">
                    <div @click.prevent.stop 
                         style="padding: 0 6px;"
                         @click="toggle(0)">确定</div>
                  </div>
                </div>
              </div>
            </template>
          </cpn>
          <cpn title="自定义雷区" index="1" v-show="showCustom">
            <template #default>
              <div class="custom">
                <div class="custom-left">
                  <div>高度(H)&nbsp; :<input type="text" v-model="rows"></div>
                  <div>宽度(W) :<input type="text" v-model="columns"></div>
                  <div>雷数(M) :<input type="text" v-model="totalMines"></div>
                </div>
                <div class="custom-right">
                  <div class="button">
                    <span @click.prevent.stop="changeMines">确定</span>
                  </div>
                  <div class="button">
                    <span @click.prevent.stop="toggle(1)">取消</span>
                  </div>
                </div>
              </div>
            </template>
          </cpn>
        </div>
      </div>
      <div class="outside">
        <div class="table-top">
          <div class="num">{{mines | addZero(true)}}</div>
          <div class="start-button" 
                ref="startButton" 
                @mousedown.prevent.stop="addClass" 
                @mouseup.prevent.stop="removeClass" 
                @mouseout.prevent.stop="removeClass">
            <img :src="buttonImg">
          </div>
          <div class="num">{{time | addZero(true)}}</div>
        </div>
        <div class="table-outside">
          <div class="newRecord-0" v-show="breakRecord">
            <div class="newRecord newRecord-1">
              <div class="newRecord newRecord-2">
                <div class="newRecord-top">
                  已破{{recordLevel}}级纪录。<br>请留尊姓大名。
                </div>
                <input type="text" 
                       class="newRecord-input"
                       value="匿名"
                       ref="newRecordInput">
                <div class="button newRecord-button" @click="changeRecord">确定</div>
              </div>
            </div>
          </div>
          <div class="cover"
              @click.prevent.stop
              v-if="showCover"></div>
          <table border="1" 
                cellspacing="0px" 
                cellpadding='0px'
                border-collapse="collapse">
            <tbody>
              <tr v-for="(rows,i) in item">
                <td v-for="(columns,j) in rows"
                    :class='{
                      istop:i == 0,
                      isbottom:i == item.length-1,
                      isleft:j == 0,
                      isright:j == rows.length-1
                    }'>
                  <div class="item" 
                        @mousedown.prevent.stop="clickItem(i,j)" 
                        @mouseup.prevent.stop="clickUp(i,j)" 
                        @contextmenu.prevent.stop
                        @mouseover.prevent.stop="mouseOver(i,j)"
                        ref="itemCover" 
                        :class="{
                          hidden:clicking,
                          isMine:item[i][j].ismine,
                          showInner:!item[i][j].clicked,
                          opacity0:item[i][j].clicked,
                          redMine:item[i][j].mines == 10,
                          wrongMine:item[i][j].mines == 9
                        }">
                    <img :src="imgs[item[i][j].mines - 1]"
                          class="img"
                          v-show="item[i][j].clicked">
                    <span>
                      <img src="./assets/img/flag.png" 
                           v-show="item[i][j].flag"
                           style="height: 12px;width: 12px; vertical-align: top;">
                      <img src="./assets/img/mark.png" 
                           v-show="item[i][j].qMark"
                           style="height: 12px;width: 12px; vertical-align: top;">
                    </span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>  
    </div>
      
  </div>
</template>

<script>
  
import filters from './methods/filters.js'
import watch from './methods/watch.js'
import mounted from './methods/mounted.js'
import created from './methods/created.js'
import methods from './methods/methods.js'
import computed from './methods/computed.js'
import data from './methods/data.js'

import cpn from './components/cpn.vue'
export default {
  name: 'App',
  data(){
    return data
  },
  components:{
    cpn
  },
  computed,
  created,
  mounted,
  methods,
  watch,
  filters
}
</script>

<style>
  @import './assets/css/mineSweeper.css';
</style>
